<template>
    <div>
        <Card class="wrap" :bordered="false" :dis-hover="true">
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap">
                    <div class="table-top-wrap-bottom">
                        <div class="table-top-wrapper">
                            <Select v-model="search.state" clearable placeholder="状态">
                                <Option
                                    v-for="item in state"
                                    :value="item.value"
                                    :key="item.value"
                                >{{ item.label }}</Option>
                            </Select>
                        </div>
                        <div>
                            <Button
                                icon="ios-search"
                                @click="handleSearch"
                                class="search-btn"
                                style="background:#009688;color:#fff"
                            >搜索</Button>
                        </div>
                    </div>
                </div>
            </Form>
            <Table :height="tableHeight" border :columns="columns" :data="list">
                <template slot-scope="{ row }" slot="Sex">{{ row.Sex | SexCn }}</template>
                <template slot-scope="{ row }" slot="State">{{ row.State | stateCn }}</template>
                <template slot-scope="{ row }" slot="CreateTime">{{ row.CreateTime | CreateTimeCn }}</template>
                <template slot-scope="{ row }" slot="action">
                    <Button
                        type="primary"
                        size="small"
                        style="margin-right: 5px;background:#5ab1ef;color:#fff;border:#5ab1ef;"
                        @click="ChangeAppointment(row)"
                    >修改</Button>
                    <Button
                        style="margin-right: 5px;background:#ff9900;color:#fff;border:#5ab1ef;"
                        type="error"
                        size="small"
                        @click="AdDoctorRefund(row)"
                    >退款</Button>
                </template>
            </Table>
            <div class="page-wrap">
                <div class="page-wrap-total">共 {{total}} 条</div>
                <div>
                    <Page
                        placement="top"
                        :total="total"
                        :current="current"
                        @on-change="changePage"
                        @on-page-size-change="changePageSize"
                        show-sizer
                    ></Page>
                </div>
            </div>
        </Card>
        <Modal :mask-closable="false" v-model="isModal" :title="ModalTitle" width="700">
            <div v-if="isModal">
                <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="100">
                    <Row>
                        <i-col :lg="{ span: 12}">
                            <FormItem label="预约人" prop="appointmentName">
                                <i-input v-model="formItem.UserName" placeholder="请输入预约人姓名"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 12}">
                            <FormItem label="联系方式" prop="phone">
                                <i-input v-model="formItem.UserPhone" placeholder="请输入预约人电话"></i-input>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 12}">
                            <FormItem label="患者姓名" prop="patientName">
                                <i-input v-model="formItem.PatientName" placeholder="请输入患者姓名"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 12}">
                            <FormItem label="患者年龄" prop="age">
                                <i-input v-model="formItem.Age" placeholder="请输入患者年龄"></i-input>
                            </FormItem>
                        </i-col>
                    </Row>

                    <Row>
                        <i-col :lg="{ span: 12}">
                            <FormItem label="患者性别" prop="sex">
                                <RadioGroup v-model="formItem.Sex">
                                    <Radio label="1">男</Radio>
                                    <Radio label="0">女</Radio>
                                </RadioGroup>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 12}">
                            <FormItem label="预约城市" prop="city">
                                <Select v-model="formItem.City" clearable placeholder="状态">
                                    <Option
                                        v-for="item in cityList"
                                        :value="item.label"
                                        :key="item.value"
                                    >{{ item.label }}</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                    </Row>

                    <Row>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="主诉病情">
                                <i-input v-model="formItem.Description" placeholder="请简述患者的就诊病情"></i-input>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="备注">
                                <i-input v-model="formItem.Remark" placeholder="备注"></i-input>
                            </FormItem>
                        </i-col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <Button size="large" @click="handleFromClose">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit('formItem',ModalTitle)">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import { GetOrderList, AdDoctorRefund,EditOrder } from './service'

import moment from 'moment'
export default {
    name: 'usersList',
    data() {
        return {
            list: [],
            search: {},
            pagesize: 10,
            pageindex: 1,
            total: 0,
            current: 1,
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '订单号',
                    width: 220,
                    key: 'OrderNum'
                },
                {
                    title: '预约人',
                    key: 'UserName'
                },
                {
                    title: '联系方式',

                    key: 'UserPhone'
                },
                {
                    title: '患者姓名',
                    key: 'PatientName'
                },
                {
                    title: '年龄',
                    key: 'Age'
                },
                {
                    title: '性别',
                    slot: 'Sex'
                },
                {
                    title: '就诊城市',
                    key: 'City'
                },

                {
                    title: '状态',
                    slot: 'State'
                },
                {
                    title: '操作',
                    align: 'center',
                    slot: 'action'
                }
            ],
            state: [
                {
                    value: 0,
                    label: '待付款'
                },
                {
                    value: 1,
                    label: '已付款'
                },
                {
                    value: 2,
                    label: '已确认'
                },
                {
                    value: 3,
                    label: '已接单'
                },
                {
                    value: 4,
                    label: '已开始'
                },
                {
                    value: 5,
                    label: '已完成'
                },
                {
                    value: 6,
                    label: '已取消'
                },
                {
                    value: 7,
                    label: '已退款'
                },
                {
                    value: 8,
                    label: '陪诊完成'
                },
                {
                    value: 9,
                    label: '评价完成'
                },
                {
                    value: 10,
                    label: '全部完成'
                }
            ],
            sexList: [
                {
                    value: 1,
                    label: '男'
                },
                {
                    value: 0,
                    label: '女'
                }
            ],
            cityList: [
                {
                    value: 0,
                    label: '济南'
                },
                {
                    value: 1,
                    label: '青岛'
                }
            ],
            isModal: false,
            formItem: {
                UserName: '',
                UserPhone: '',
                PatientName: '',
                Sex: '',
                Age: '',
                City: '',
                Description: '',
                Remark:'',
                State:'',
                OrderNum:''
            },
            ModalTitle: '修改信息',
            ruleValidate: {
                appointmentName: [
                    {
                        required: true,
                        message: '请填写预约人姓名',
                        type: 'number',
                        trigger: 'change'
                    }
                ],

                patientName: [
                    {
                        required: true,
                        message: '请填写患者姓名',
                        trigger: 'blur'
                    }
                ],
                phone: [
                    {
                        required: true, 
                        message: '请填写电话',
                        trigger: 'blur'
                    }
                ],

            } //表单验证
        }
    },
    filters: {
        SexCn(value) {
            if (value == 1) {
                return '男'
            } else {
                return '女'
            }
        },
        stateCn(value) {
            if (value === '0') {
                return '待付款'
            } else if (value === '1') {
                return '已付款'
            } else if (value === '2') {
                return '已确认'
            } else if (value === '3') {
                return '已接单'
            } else if (value === '4') {
                return '已开始'
            } else if (value === '5') {
                return '已完成'
            } else if (value === '6') {
                return '已取消'
            } else if (value === '7') {
                return '已退款'
            } else if (value === '8') {
                return '陪诊完成'
            } else if (value === '9') {
                return '评价完成'
            } else if (value === '10') {
                return '全部完成'
            }
        }
    },
    computed: {
        tableHeight() {
            return window.innerHeight - 240
        }
    },
    mounted() {
        this.GetOrderList()
    },

    methods: {
        // 修改
        async handleSubmit(){
            console.log(this.formItem)
            let res = await EditOrder( this.formItem)
            console.log(res)
            if(res.state == 'success'){
                this.$message.success(res.message)
                this.isModal = false
            }
        },
        // 退款
        AdDoctorRefund(row) {
            let data = {
                outTradeNo: row.OrderNum,
                totalFee: Number(row.Price) * 100,
                refundFee: Number(row.Price) * 100,
                reason: ''
            }
            console.log(data)
            this.$confirm('您确认要退款嘛？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await AdDoctorRefund(data)

                    if (res.state === 'success') {
                        this.$message.success('退款成功')
                        this.GetGridJsonList()
                    } else {
                        this.$message.error(res.message)
                    }
                })
                .catch(() => {})
        },

        // 搜索
        handleSearch() {
            this.pageindex = 1
            this.loading = true
            this.GetOrderList()
        },

        // 获取列表
        async GetOrderList() {
            let data = {
                state: this.search.state
            }
            console.log(data)
            let res = await GetOrderList(data)
            console.log(JSON.stringify(res.data))
            if (res.state === 'success') {
                this.list = res.data.rows
                this.total = res.data.records
            }
        },
        handleFromClose(){
             this.isModal = false
        },
        // 修改
        ChangeAppointment(row) {
            this.isModal = true
            this.formItem = {
                UserName: row.UserName,
                UserPhone: row.UserPhone,
                PatientName: row.PatientName,
                Sex: row.Sex,
                Age: row.Age,
                City: row.City,
                Description: row.Description,
                Remark:row.Remark,
                State:row.State,
                OrderNum:row.OrderNum
            }
        },
        
        // 分页
        changePage(num) {
            this.pageindex = num
            this.loading = true
            this.GetGridJsonList()
        },
        changePageSize(num) {
            this.pagesize = num
            this.loading = true
            this.GetGridJsonList()
        }
    }
}
</script>

<style lang="less" scoped>
.table-top-wrapper {
    margin-left: 10px;
}
.is-selected {
    color: #1989fa;
}
.wrap {
    padding-bottom: 10px;
}
.page-wrap {
    position: fixed;
    bottom: 25px;
    left: 230px;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
.page-wrap-total {
    border-radius: 3px;
    padding: 0 10px;
    height: 32px;
    line-height: 32px;
    margin: 0 20px;
    border: 1px solid #dcdee2;
    font-size: 12px;
}
.search-con {
    padding: 10px 0;
    .search {
        &-col {
            display: inline-block;
            width: 200px;
        }
        &-input {
            display: inline-block;
            width: 200px;
            margin-left: 2px;
        }
        &-btn {
            margin-left: 2px;
        }
    }
}
.list-btn {
    margin: 0 5px;
}
.delete-btn {
    background: #fc8675;
    border: none;
}
.edit-btn {
    background: #5ab1ef;
    border: none;
}
</style>